<template>
  <el-card shadow="never">
    <div slot="header">
      <span class="machine-title">{{ $t('machineMaterial') }}</span>
    </div>
    <dynForm
      ref="dataForm"
      :info-form="searchForm"
      :select-list="selectList"
      :search-tags="searchTags">
      <template slot="prepend">
        <el-form-item
          :rules="[{ required: true, message: `${$t('pleaseInput')}${$t('materialCode')}`, trigger: 'blur' }]"
          :label="$t('materialCode')"
        >
          <el-input
            :disabled="disabled"
            v-model.trim="searchForm.materialCode"
            :placeholder="`${$t('pleaseInput')}${$t('materialCode')}`"
            clearable
            @keyup.enter.native="getEnterInfos"/>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('eqpId')}`, trigger: 'change' }]"
          :label="$t('eqpId')"
          prop="eqpId"
        >
          <el-select
            v-model="searchForm.eqpId"
            :disabled="disabled"
            :placeholder="`${$t('pleaseInput')}${$t('eqpId')}`"
            clearable>
            <el-option
              v-for="item in eqpIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </template>
    </dynForm>
    <el-row>
      <div class="btn-row">
        <el-button icon="el-icon-circle-close" @click="handleClose">
          {{ $t("cancel") }}</el-button>
        <el-button
          :loading="loading"
          :disabled="disabled"
          type="primary"
          icon="el-icon-receiving"
          @click="handleSave"
        >{{ $t('save') }}</el-button>
      </div>
    </el-row>
  </el-card>
</template>

<script>
import { getMaterialInfo, doMaterialLendOnEqp } from '@/api/materialManagement/machineMaterial'
import { eqpidnamelist } from '@/api/equipment/eqpbase'
export default {
  name: 'MachineMaterial',
  data() {
    return {
      searchForm: {},
      selectList: {},
      eqpIdList: [],
      disabled: false,
      loading: false,
      searchTags: Object.freeze(
        [
          { label: this.$t('supplierName'), prop: 'supplierName', tag: 'DynInput', disabled: true },
          { label: this.$t('supplierBatchNumber'), prop: 'supplierBatchNumber', tag: 'DynInput', disabled: true },
          { label: this.$t('purchaseOrderNo'), prop: 'purchaseOrder', tag: 'DynInput', disabled: true },
          { label: this.$t('productionDate'), prop: 'productionDate', tag: 'Dyndate', disabled: true },
          { label: this.$t('expireDate'), prop: 'expireDate', tag: 'Dyndate', disabled: true },
          { label: this.$t('iniLength'), prop: 'iniLength', tag: 'DynInput', disabled: true },
          { label: this.$t('currentLength'), prop: 'currentLength', tag: 'DynInput', disabled: true },
          { label: this.$t('description'), prop: 'remark', tag: 'DynTextarea', row: 2, width: '100%', disabled: true }
        ]
      )
    }
  },
  created() {
    this.getEqpIdNamelList()
    this.$nextTick(() => {
      this.$refs['dataForm'].$refs['dynForm'].clearValidate()
    })
  },
  methods: {
    async getEnterInfos(e) {
      const res = await getMaterialInfo({ scanCode: e.target.value })
      this.$betterTips(res, this.handleMerge.bind(this, res))
    },
    // 合并对象
    handleMerge(res) {
      this.searchForm = Object.assign({}, this.searchForm, res.data)
      // 防止出现验证提示
      this.$set(this.searchForm, 'eqpId', undefined)
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleSave() {
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          doMaterialLendOnEqp({ eqpId: this.searchForm.eqpId, materialCode: this.searchForm.materialCode }).then(res => {
            if (res.code === 1) {
              this.disabled = true
            } else {
              this.disabled = false
            }
            this.loading = false
            this.$betterTips(res)
          })
        }
      })
    },
    async getEqpIdNamelList() {
      const res = await eqpidnamelist()
      this.eqpIdList = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  width: 1100px;
  margin: 20px auto;
}
::v-deep .el-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .el-form-item {
    width: 48%;
    .el-form-item__content{
      width: 60%;
      .el-select {
        width: 100%;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
}
.machine-title{
  font-size: 18px;
  font-weight: 500;
}
.btn-row{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
